<template>	
	<view class="body" :style="{height: computedBodyHeight}">
		<!-- 顶部商家信息 -->
		<view class="card">
			<view class="card_top">
				<view class="card_left">
					<image src="/static/logo.png" mode="widthFix" style="width: 100%;border-radius: 30rpx;"></image>
				</view>
				<view class="card_right">
					<view class="card_name">
						<view class="label">品牌</view>
						<view class="text">xxxxxxxxxxxx酒厂</view>
					</view>
					<view class="card_info">
						<view class="type card_border" style="color: #42B7FB;">堂食/外送</view>
						<view class="fenge"> | </view>
						<view class="address card_border" @click="toMap">
							<span class="my_iconfont icon-location" style="font-size: 0.7rem;color: #42B7FB;"></span>
							店铺位置店铺位置店铺位置店铺位置店铺位置店铺位置
						</view>
						<view class="fenge"> | </view>
						<view class="time card_border">预计30分钟送达</view>
					</view>
				</view>
			</view>
			<uni-notice-bar scrollable class="notice_bar"
				:fontSize="11"
				text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</view>
		
		<!-- 中部产品列表 -->
		<view class="main_content" :style="{height: computedHeight}">
			<view class="order-container">
				<!-- 左侧菜单栏 -->
				<scroll-view class="category-menu" scroll-y>
					<view 
						v-for="(category, index) in foodCategories" 
						:key="index"
						class="category-item"
						:class="{active: currentCategory === category, before1: index === currentIndex - 1, after1: index === currentIndex + 1}"
						@click="changeCategory(category, index)"
					>
						<text>{{category}}</text>
					</view>
				</scroll-view>
				
				<!-- 右侧内容区 -->
				<view class="content">
					<!-- 当前分类标题 -->
					<view class="category-title">
						<text>{{currentCategory}}</text>
					</view>
					<view class="content-area">
						<!-- 餐品列表 -->
						<scroll-view class="food-list">
							<view 
							v-for="(food, index) in currentCategoryFoods" 
							:key="food.id"
							class="food-item"
							@click="navigateToDetail(food, currentCategory)"
						>
								<image class="food-image" :src="food.image || '/static/logo.png'" mode="aspectFill"></image>
								<view class="food-info">
									<text class="food-name">{{food.name}}</text>
									<text class="food-desc">{{food.desc}}</text>
									<view class="food-price-action">
								<text class="food-price">¥{{food.price[0].price.toFixed(2)}}</text>
								<view class="food-action">
									<button class="action-btn spec-btn" @click.stop="showSpecPopup(food)">选规格</button>
								</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部结算栏 -->
		<view class="checkout-bar">
			<view class="total-price">
				<text>总计：</text>
				<text class="price">¥{{cartTotal.toFixed(2)}}</text>
			</view>
			<view style="display: flex;">
				<view class="icon_cart" @click="goCart">
					<view class="my_iconfont icon-gouwuche" style="font-size: 1.5rem;"></view>
					<view class="tip">{{cart.length}}</view>
				</view>
				<button
					class="checkout-btn" 
					:class="{disabled: !canCheckout}"
					@click="showOrderConfirm"
				>
					查看订单
				</button>
			</view>
		</view>
		
		<!-- 规格选择弹窗 -->
		<uni-popup ref="specPopup" type="center">
			<view class="popup-title">选择规格</view>
			<view class="spec-popup">
				<view class="desc">
					<image :src="currentFood && currentFood.image" mode="widthFix"></image>
					<view style="margin-left: 30rpx;flex: 1;">
						<view v-if="currentFood" class="food-name">{{currentFood.name}}</view>
						<text v-if="currentFood" class="food-desc">{{currentFood.desc}}</text>
					</view>
				</view>
				<view class="spec-options">
					<view 
						class="spec-option" 
						v-for="(spec, index) in specs" 
						:key="index"
						:class="{active: selectedSpec === spec.size}"
						@click="selectSpec(spec)"
					>
						<view class="spec-name">{{spec.size}}</view>
						<view class="spec-price">¥{{spec.price.toFixed(2)}}</view>
					</view>
				</view>
				<view class="quantity-selector">
					<text class="quantity-label">数量</text>
					<view class="quantity-control">
						<button class="quantity-btn" @click="decrementQuantity">
							<view class="my_iconfont icon-jian"></view>
						</button>
						<text class="quantity-value">{{quantity}}</text>
						<button class="quantity-btn" @click="incrementQuantity">
							<view class="my_iconfont icon-jia"></view>
						</button>
					</view>
				</view>
				<view class="spec-total">
					<text>总计：</text>
					<text class="spec-total-price">¥{{(selectedSpecPrice * quantity).toFixed(2)}}</text>
				</view>
				<view class="spec-actions">
					<button class="cancel-btn" @click="closeSpecPopup">取消</button>
					<button class="confirm-btn" @click="addCart">加入购物车</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 订单确认弹窗 -->
		<uni-popup ref="orderPopup" type="center">
			<view class="popup-title">订单确认</view>
			<view class="order-confirm-popup">
				<!-- 用餐方式选择 -->
				<view class="order-type-selector">
					<text class="selector-label">用餐方式：</text>
					<view class="selector-options">
						<view 
							class="option" 
							:class="{active: orderType === 'dine-in'}"
							@click="orderType = 'dine-in'"
						>
							<view class="option-circle" :class="{checked: orderType === 'dine-in'}"></view>
							<text>堂食</text>
						</view>
						<view 
							class="option" 
							:class="{active: orderType === 'takeout'}"
							@click="orderType = 'takeout'"
						>
							<view class="option-circle" :class="{checked: orderType === 'takeout'}"></view>
							<text>外带</text>
						</view>
					</view>
				</view>
				
				<!-- 外带信息表单 -->
				<view class="takeout-form" v-if="orderType === 'takeout'">
					<view class="form-item">
						<text class="form-label">收货地址</text>
						<view class="address-picker" @click="chooseAddress">
							<text class="address-text">{{takeoutInfo.address || '请选择收货地址'}}</text>
							<text class="arrow">></text>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">联系人</text>
						<input 
							class="form-input" 
							type="text" 
							placeholder="请输入联系人名称" 
							:value="takeoutInfo.name"
							@input="updateName"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">联系电话</text>
						<input 
							class="form-input" 
							type="number" 
							placeholder="请输入联系电话" 
							:value="takeoutInfo.phone"
							@input="updatePhone"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">餐具需求</text>
						<view class="radio-group">
							<view 
								class="radio-item" 
								:class="{active: takeoutInfo.needTableware}"
								@click="updateTableware(true)"
							>
								<view class="radio-circle" :class="{checked: takeoutInfo.needTableware}"></view>
								<text>需要</text>
							</view>
							<view 
								class="radio-item" 
								:class="{active: !takeoutInfo.needTableware}"
								@click="updateTableware(false)"
							>
								<view class="radio-circle" :class="{checked: !takeoutInfo.needTableware}"></view>
								<text>不需要</text>
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">备注</text>
						<textarea 
							class="form-textarea" 
							placeholder="请输入备注信息（最多50字）" 
							maxlength="50"
							:value="takeoutInfo.remark"
							@input="updateRemark"
						></textarea>
					</view>
					
					<!-- 外带价格信息 -->
					<view class="popup-price-info">
						<view class="popup-price-item">
							<text>商品金额：</text>
							<text>¥{{cartTotal.toFixed(2)}}</text>
						</view>
						<view class="popup-price-item">
							<text>配送费：</text>
							<text>{{needDeliveryFee ? `¥${deliveryFee.toFixed(2)}` : '免配送费'}}</text>
						</view>
						<view class="popup-price-item total">
							<text>合计：</text>
							<text>¥{{finalTotal.toFixed(2)}}</text>
						</view>
					</view>
				</view>
				
				<!-- 订单商品列表 -->
				<scroll-view class="order-items" scroll-y>
					<view 
						v-for="(item, index) in checkedList" 
						:key="item.id"
						class="order-item"
					>
						<text class="item-name">
							<text class="my_iconfont icon-del" @click="removeGoods(item)"></text>
							{{item.name}}
						</text>
						<view class="item-action">
							<button class="cart-action-btn minus" @click.stop="decreaseCartItem(item)">
								<view class="my_iconfont icon-jian"></view>
							</button>
							<text class="item-count">{{item.count}}</text>
							<button class="cart-action-btn plus" @click.stop="incrementCartItem(item)">
								<view class="my_iconfont icon-jia"></view>
							</button>
						</view>
						<text class="item-price">¥{{(item.price * item.count).toFixed(2)}}</text>
					</view>
				</scroll-view>
				
				<!-- 堂食价格信息 -->
				<view class="popup-price-info" v-if="orderType === 'dine-in'">
					<view class="popup-price-item total">
						<text>合计：</text>
						<text>¥{{cartTotal.toFixed(2)}}</text>
					</view>
				</view>
				
				<!-- 底部按钮 -->
				<view class="popup-buttons">
					<button class="cancel-btn" @click="closeOrderConfirm">取消</button>
					<button 
						class="confirm-btn" 
						:class="{disabled: !this.canCheckout}"
						@click="submitOrder"
					>
						确认支付
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	import { addToCart } from '@/utils/addToCart.js'
	
	export default {
		data() {
			return {
				specs: [],
				orderType: 'dine-in', // 默认堂食
				currentIndex: 0,
				phoneRegex: /^1[3-9]\d{9}$/, // 手机号正则表达式
				total_height: 0,
				// 规格选择相关数据
				currentFood: null, // 当前选中的食品
				selectedSpec: '', // 当前选中的规格
				quantity: 1, // 选择的数量
			}
		},
		onReady() {
			// 页面加载时的逻辑
			const query = uni.createSelectorQuery().in(this);
			
			let deviceWidth = uni.getSystemInfo({
				success: (res) => {
					let px = (res.windowWidth / 750) * Number(20)
					this.total_height += Math.floor(px);
				}
			}); //获取设备屏幕宽度
			
			query.select(".card")
			  .boundingClientRect((data) => {
				this.total_height += data.height
			})
			query.select(".checkout-bar")
			  .boundingClientRect((data) => {
				  // console.log(222, data.height)
				this.total_height += data.height
			}).exec();
		},
		computed: {
			...mapState([
				'foodCategories',
				'currentCategory',
				'cart',
				'orderMinimum',
				'deliveryFee',
				'deliveryFreeThreshold',
				'takeoutInfo'
			]),
			...mapGetters([
				'currentCategoryFoods',
				'cartTotal',
				'canCheckout',
				'needDeliveryFee',
				'finalTotal',
				'checkedList'
			]),
			// 表单验证
			isFormValid() {
				return this.takeoutInfo.address && this.isPhoneValid&&this.takeoutInfo.name
			},
			// 手机号验证
			isPhoneValid() {
				return this.phoneRegex.test(this.takeoutInfo.phone)
			},
			computedBodyHeight() {
			  // 使用模板字符串拼接计算后的高度值
			  return `calc(100vh - 45px)`
			},
			computedHeight() {
			  // 使用模板字符串拼接计算后的高度值
			  return `calc(100vh - ${this.total_height}px - 45px)`
			},
			selectedSpecPrice() {
				const spec = this.specs.find(s => s.size === this.selectedSpec)
				return spec ? spec.price : 0
			}
		},
	
		methods: {
			...mapMutations([
				'setCurrentCategory',
				'updateTakeoutInfo'
			]),
			// 跳转到商品详情页
			navigateToDetail(food, category) {
				this.$navigate.navigateToUnique('/pages/detail/index', {foodId:food.id, category:category})
			},
			// 跳转购物车
			goCart() {
				this.$navigate.navigateToUnique('/pages/cart/index')
			},
			// 跳转地图
			toMap() {
				this.$navigate.navigateToUnique(`/pages/map/index`)
			},
			// 切换分类
			changeCategory(category, index) {
				this.currentIndex = index
				this.setCurrentCategory(category)
			},
			// 显示规格选择弹窗
			showSpecPopup(food) {
				this.currentFood = food
				this.selectedSpec = '1L' // 默认选中第一个规格
				this.quantity = 1 // 重置数量为1
				this.$refs.specPopup.open()
				this.specs = food.price
			},
			// 关闭规格选择弹窗
			closeSpecPopup() {
				this.$refs.specPopup.close()
			},
			// 选择规格
			selectSpec(spec) {
				// console.log(111, spec)
				this.selectedSpec = spec.size
			},
			// 增加数量
			incrementQuantity() {
				this.quantity++
			},
			// 减少数量
			decrementQuantity() {
				if (this.quantity > 1) {
					this.quantity--
				}
			},
			addCart() {
				addToCart(this.currentFood, this.selectedSpec, this.quantity, this.currentCategory)
				this.$refs.specPopup.close()
			},
			// 增加购物车商品数量
			incrementCartItem(item) {
				// 直接增加购物车中商品的数量
				item.count++
				
				// 显示成功提示
				uni.showToast({
					title: '已加购',
					icon: 'none',
					duration: 500
				})
			},
			removeGoods(item) {
				uni.showModal({
					title: '提示',
					content: '是否从购物车移除该商品？',
					success: (res) => {
						if (res.confirm) {
							// 从购物车移除商品
							const index = this.cart.findIndex(cartItem => cartItem.id === item.id)
							if (index !== -1) {
								this.cart.splice(index, 1)
								if(this.cart.length === 0) {
									this.closeOrderConfirm()
								}
								
								// 显示成功提示
								uni.showToast({
									title: '已移除商品',
									icon: 'success',
									duration: 500
								})
							}
						}
					}
				})
			},
			// 减少购物车商品数量
			decreaseCartItem(item) {
				if (item.count > 1) {
					// 如果数量大于1，减少数量
					item.count--
					
					// 显示成功提示
					uni.showToast({
						title: '已减购',
						icon: 'none',
						duration: 500
					})
				} else {
					// 如果数量为1，询问是否移除
					this.removeGoods(item)
				}
			},
			
			// 选择地址
			chooseAddress() {
				// 这里可以调用地址选择器，这里简化为手动输入
				uni.showModal({
					title: '输入收货地址',
					editable: true,
					content: this.takeoutInfo.address,
					success: (res) => {
						if (res.confirm && res.content) {
							this.updateTakeoutInfo({ address: res.content })
						}
					}
				})
			},
			// 更新电话
			updatePhone(e) {
				this.updateTakeoutInfo({ phone: e.detail.value })
			},
			updateName (e) {
				this.updateTakeoutInfo({ name: e.detail.value })
			},
			// 更新餐具需求
			updateTableware(value) {
				this.updateTakeoutInfo({ needTableware: value })
			},
			// 更新备注
			updateRemark(e) {
				this.updateTakeoutInfo({ remark: e.detail.value })
			},
			// 显示订单确认弹窗
			showOrderConfirm() {
				if (!this.canCheckout) {
					uni.showToast({
						title: `订单最低金额¥${this.orderMinimum.toFixed(2)}`,
						icon: 'none'
					})
					return
				}
				
				this.$refs.orderPopup.open()
			},
			// 关闭订单确认弹窗
			closeOrderConfirm() {
				this.$refs.orderPopup.close()
			},
			// 提交订单
			submitOrder() {
				if (!this.canCheckout) {
					uni.showToast({
						title: `订单最低金额¥${this.orderMinimum.toFixed(2)}`,
						icon: 'none'
					})
					return
				}
				
				// 外带模式下验证表单
				if (this.orderType === 'takeout' && !this.isFormValid) {
					uni.showToast({
						title: '请完善收货信息',
						icon: 'none'
					})
					return
				}
				
				// 调用Vuex中的提交订单action
				this.$store.dispatch('submitOrder', this.orderType).then(orderInfo => {
					// 关闭弹窗
					this.closeOrderConfirm()
					
					// 显示成功提示
					uni.showToast({
						title: '下单成功',
						icon: 'success'
					})
					
					// 可以在这里进行其他操作，如跳转到订单详情页等
				})
			}
		}
	}
</script>

<style>
	.body {
		display: flex;
		flex-direction: column;
		background-color: #f7f7f7;
	}
	/* 顶部卡片css */
	.card {
		width: 100%;
		padding: 20rpx;
		padding-bottom: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.card_top {
		display: flex;
		width: 100%;
		margin-bottom: 20rpx;
	}
	.card_left {
		display: flex;
		width: 20%;
	}
	.card_right {
		width: 80%;
		padding-left: 20rpx;
	}
	.card_name {
		display: flex;
		align-items: center;
	}
	.card_name .label {
		border-radius: 10rpx;
		background-color: rgb(253, 226, 20);
		margin-right: 20rpx;
		padding: 2rpx 10rpx;
		font-weight: bold;
	}
	.card_name .text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 2rem;
		text-align: right;
	}
	.card_info {
		display: flex;
		color: #818181;
		width: 100%;
	}
	.fenge {
		margin: auto 5rpx
	}
	.card_border {
		font-size: 0.7rem;
		max-width: 33%;
		margin:auto 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 10rpx;
		border: 1rpx solid #3188ba;
		border-radius: 10rpx;
	}
	
	.main_content {
		overflow: hidden;
		box-shadow: -10rpx 0rpx 20rpx rgba(150, 150, 150, 0.3);
	}
	/* 页面容器 */
	.order-container {
		height: 100%;
		display: flex;
		background-color: #f8f8f8;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		border-radius: 5rpx 5rpx 0 0;
	}
	
	/* 左侧菜单栏样式 */
	.category-menu {
		width: 25%;
		height: 100%;
		background-color: #fff;
		overflow: scroll;
	}
	
	.category-item {
		padding: 30rpx 20rpx;
		text-align: center;
		font-size: 1rem;
		color: #000;
		background-color: rgba(242,242,242,0.6);
	}
	.category-item.before1 {
		border-radius: 0 0 30rpx 0;
	}
	.category-item.after1 {
		border-radius: 0 30rpx 0 0;
	}
	.category-item.active {
		background-color: #fff;
		font-weight: bold;
		border-left: 10rpx solid #3188ba;
	}
	
	/* 右侧内容区样式 */
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.content-area {
		display: flex;
		flex-direction: column;
		flex:1;
		overflow: scroll;
	}
	
	.category-title {
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		background-color: #fff;
	}
	
	.food-list {
		flex: 1;
		background-color: #fff;
	}
	
	.food-item {
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		/* border-bottom: 1rpx solid #e2e2e2; */
	}
	
	.food-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
	
	.food-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.food-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.food-price-action {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.food-price {
		font-size: 32rpx;
		color: #3188ba;
		font-weight: bold;
	}
	
	.food-action {
		display: flex;
		align-items: center;
	}
	
	.action-btn {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		padding: 0;
		margin: 0;
		line-height: 1;
	}
	
	.plus {
		background-color: #3188ba;
		color: #f7f7f7;
	}
	
	.spec-btn {
		background-color: #3188ba;
		color: #f7f7f7;
		width: auto;
		padding: 0 20rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
	}
	
	.minus {
		background-color: #f5f5f5;
		color: #666;
		border: 1rpx solid #ddd;
	}
	
	.food-count {
		margin: 0 20rpx;
		font-size: 28rpx;
	}
	
	/* 底部结算栏样式 */
	.checkout-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 120rpx;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.total-price {
		display: flex;
		align-items: center;
	}
	
	.price {
		color: #3188ba;
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.checkout-btn {
		background-color: #3188ba;
		color: #f7f7f7;
		font-size: 30rpx;
		padding: 0 40rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
	}
	
	.checkout-btn.disabled {
		background-color: #ccc;
	}
	
	/* 规格选择弹窗样式 */
	.spec-popup {
		padding: 30rpx;
		width: 600rpx;
		background-color: #f7f7f7;
		border-radius: 0 0 16rpx16rpx;
	}
	.spec-popup .desc {
		display: flex;
	}
	.spec-popup .desc image {
		width: 25%;
		border-radius: 20rpx;
	}
	
	.spec-options {
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0;
	}
	
	.spec-option {
		width: 30%;
		margin: 10rpx 1.5%;
		padding: 15rpx 0;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		text-align: center;
	}
	
	.spec-option.active {
		border-color: #3188ba;
		background-color: rgba(66, 183, 251, 0.1);
	}
	
	.spec-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.spec-price {
		font-size: 26rpx;
		color: #3188ba;
		font-weight: bold;
	}
	
	.quantity-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.quantity-label {
		font-size: 28rpx;
		color: #333;
		
	}
	
	.quantity-control {
		display: flex;
		align-items: center;
	}
	
	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		padding: 0;
		margin: 0;
		line-height: 1;
	}
	
	.quantity-value {
		margin: 0 20rpx;
		font-size: 28rpx;
		min-width: 40rpx;
		text-align: center;
	}
	
	.spec-total {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 0;
	}
	
	.spec-total-price {
		font-size: 32rpx;
		color: #3188ba;
		font-weight: bold;
	}
	
	.spec-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.cancel-btn, .confirm-btn {
		width: 45%;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	
	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.confirm-btn {
		background-color: #3188ba;
		color: #f7f7f7;
	}
	
	/* 订单确认弹窗样式 */
	.order-confirm-popup {
		border-bottom: 20rpx solid #f7f7f7;
		width: 650rpx;
		height: 100%;
		overflow-y: scroll;
		background-color: #f7f7f7;
		border-radius: 0 0 16rpx 16rpx;
		padding: 30rpx;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
	}
	
	.popup-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		border-radius:16rpx 16rpx 0 0;
		background-color: #3188ba;
	}
	
	/* 用餐方式选择器样式 */
	.order-type-selector {
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.selector-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.selector-options {
		display: flex;
		margin-top: 10rpx;
	}
	
	.option {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.option-circle {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 1rpx solid #ddd;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.option-circle.checked {
		border-color: #3188ba;
		background-color: #3188ba;
	}
	
	.option-circle.checked::after {
		content: '';
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: #f7f7f7;
	}
	
	/* 外带表单样式 */
	.takeout-form {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.form-item {
		margin-bottom: 20rpx;
	}
	
	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.address-picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #ececec;
		border-radius: 8rpx;
	}
	
	.address-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.arrow {
		font-size: 28rpx;
		color: #999;
	}
	
	.form-input {
		height: 80rpx;
		background-color: #ececec;
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 0 20rpx;
	}
	
	.radio-group {
		display: flex;
	}
	
	.radio-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.radio-circle {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 1rpx solid #ddd;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.radio-circle.checked {
		border-color: #3188ba;
		background-color: #3188ba;
	}
	
	.radio-circle.checked::after {
		content: '';
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: #f7f7f7;
	}
	
	.form-textarea {
		width: 100%;
		height: 160rpx;
		background-color: #ececec;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
	
	/* 订单商品列表样式 */
	.order-items {
		max-height: 300rpx;
		margin: 20rpx 0;
	}
	
	.order-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		font-size: 28rpx;
	}
	
	.icon-del {
		color: #999;
		margin-right: 10rpx;
	}
	.item-name {
		flex: 1;
		color: #333;
	}
	
	.item-action {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.cart-action-btn {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		padding: 0;
		margin: 0;
		line-height: 1;
	}
	
	.cart-action-btn.plus {
		background-color: #3188ba;
		color: #f7f7f7;
	}
	
	.item-count {
		color: #666;
		margin: 0 10rpx;
		min-width: 30rpx;
		text-align: center;
	}
	
	.item-price {
		color: #3188ba;
		font-weight: bold;
		min-width: 120rpx;
		text-align: right;
	}
	
	/* 价格信息样式 */
	.popup-price-info {
		margin: 20rpx 0;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}
	
	.popup-price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.popup-price-item.total {
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	/* 底部按钮样式 */
	.popup-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.cancel-btn, .confirm-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}
	
	.confirm-btn.disabled {
		background-color: #ccc;
		color: #f7f7f7;
	}
</style>